<ng-container *ngIf="groups">
  <ion-item-group>
    <ng-container *ngFor="let g of groupsArr">
      <ion-item-divider>
        <ion-skeleton-text
          animated
          style="width: 120px; height: 16px"
        ></ion-skeleton-text>
      </ion-item-divider>
      <ion-item *ngFor="let r of rowsArr">
        <ion-avatar *ngIf="showAvatar" slot="start">
          <ion-skeleton-text [animated]="true"></ion-skeleton-text>
        </ion-avatar>
        <ion-label>
          <ion-skeleton-text
            animated
            style="width: 200px; height: 14px"
          ></ion-skeleton-text>
        </ion-label>
        <ion-note slot="end">
          <ion-skeleton-text
            animated
            style="width: 80px; height: 14px"
          ></ion-skeleton-text>
        </ion-note>
      </ion-item>
    </ng-container>
  </ion-item-group>
</ng-container>

<ng-container *ngIf="!groups">
  <ion-item-group>
    <ion-item *ngFor="let r of rowsArr">
      <ion-avatar *ngIf="showAvatar" slot="start">
        <ion-skeleton-text [animated]="true"></ion-skeleton-text>
      </ion-avatar>
      <ion-label>
        <ion-skeleton-text
          animated
          style="width: 200px; height: 14px"
        ></ion-skeleton-text>
      </ion-label>
      <ion-note slot="end">
        <ion-skeleton-text
          animated
          style="width: 80px; height: 14px"
        ></ion-skeleton-text>
      </ion-note>
    </ion-item>
  </ion-item-group>
</ng-container>
